/* 二级路由 */

// 样式私有化处理  styled-components
import React from "react";
import styled from "styled-components";
import {CommonListBox, titleSize, colorRed} from "./common"
import { Link, Outlet } from 'react-router-dom';

/* 编写组件的样式： 基于 css-in-js 思想中的 styled-components 插件 */
const MenuBox = styled.div`
  display: flex;
  justify-content: space-between;
  background: lightblue;
  width: 400px;

  .title {
    font-size: ${titleSize}px;
    line-height: 40px;

    &:hover {
      color: ${colorRed}
    }
  }
`

class Menu extends React.Component {
    render() {
        return <MenuBox>
            <div>
                <Link to="/a/a1" className="title">手机a</Link>
                <Link to="/a/a2" className="title">电脑a</Link>
                <Link to="/a/a3" className="title">家电a</Link>
            </div>
            <div>
                {/* Outlet: 路由容器，用来染二级(多级)路由匹配的内容 */}
                <Outlet />
            </div>
        </MenuBox>
    }
};


export default Menu;